<!doctype html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{layout}">
<div layout:fragment="content" class="card-body main-content order"
     th:data-super-user="${session.currentUser.superUser}"
     th:data-real-name="${session.currentUser.realName}"
     th:data-company-name="${session.currentUser.companyName}">
    <form id="search-form" class="form-inline">
        <input name="pageNumber" type="hidden" value="0">
        <input name="pageSize" type="hidden" value="10">
        <div class="form-group mr-2 mb-2">
            <input name="keyword" type="text" placeholder="关键词" class="form-control">
        </div>
        <div class="form-group mr-2 mb-2">
            <div class="input-group date-picker">
                <input name="startDate" type="text" placeholder="开始日期" class="form-control">
                <div class="input-group-append input-group-addon">
                    <span class="input-group-text">
                        <i class="far fa-calendar-alt"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group mr-2 mb-2">
            <div class="input-group date-picker">
                <input name="endDate" type="text" placeholder="结束日期" class="form-control">
                <div class="input-group-append input-group-addon">
                    <span class="input-group-text">
                        <i class="far fa-calendar-alt"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="form-group mb-2">
            <button id="submit-button" type="button" class="btn btn-outline-primary mr-2">
                <i class="fa fa-search"></i>
                搜索
            </button>
            <button id="add-button" type="button" class="btn btn-outline-success add-button">
                <i class="fa fa-plus"></i>
                新增
            </button>
        </div>
    </form>

    <div id="data-list-group" class="data-list-group">
        <nav id="pagination-bar" class="pagination-bar mt-2"></nav>
        <div class="table-responsive">
            <table class="table table-hover">
                <thead>
                    <tr class="bg-light">
                        <th scope="col" class="w3 right">#</th>
                        <th scope="col" class="w4 center">生效</th>
                        <th scope="col" class="w4 center">作废</th>
                        <th scope="col">流水号</th>
                        <th scope="col">回收证明编号</th>
                        <th scope="col">回收企业名称</th>
                        <th scope="col">车主名称</th>
                        <th scope="col">车主证件号</th>
                        <th scope="col">车主电话</th>
                        <th scope="col">交车日期</th>
                        <th scope="col">注册登记日期</th>
                        <th scope="col">车辆牌照号码</th>
                        <th scope="col">车辆类型</th>
                        <th scope="col">车辆使用性质</th>
                        <th scope="col">车辆品牌型号</th>
                        <th scope="col">车辆识别代号</th>
                        <th scope="col">录入用户</th>
                        <th scope="col">创建时间</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

    <div id="data-modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">订单信息<small class="pl-2"></small></h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="data-form">
                        <fieldset>
                            <input name="id" type="hidden" class="data-item">
                            <input name="checkCode" type="hidden" class="data-item">
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>流水号</label>
                                    <div class="input-group">
                                        <input name="serialNumber" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>回收证明编号</label>
                                    <div class="input-group">
                                        <input name="certificateNumber" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>回收企业名称</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="companyName" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="companyName" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>车主名称</label>
                                    <div class="input-group">
                                        <input name="ownerName" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>车主身份证号/代码证号</label>
                                    <div class="input-group">
                                        <input name="idNumber" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>车主联系电话</label>
                                    <div class="input-group">
                                        <input name="phoneNumber" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-12">
                                    <label>车主地址</label>
                                    <div class="input-group">
                                        <input name="address" type="text" maxlength="200"
                                               class="form-control data-item">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>交车日期</label>
                                    <div class="input-group date-picker">
                                        <input name="deliveryDate" type="text" maxlength="10"
                                               pattern="^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$"
                                               class="form-control data-item">
                                        <div class="input-group-append input-group-addon">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>注册登记日期</label>
                                    <div class="input-group date-picker">
                                        <input name="registrationDate" type="text" maxlength="10"
                                               pattern="^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$"
                                               class="form-control data-item">
                                        <div class="input-group-append input-group-addon">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>车辆类型</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="vehicleType" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="vehicleType" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>车辆使用性质</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="vehicleNature" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="vehicleNature" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>车辆品牌</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="vehicleBrand" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="vehicleBrand" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>车辆使用型号</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="vehicleModel" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="vehicleModel" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>车辆牌照号码</label>
                                    <div class="input-group">
                                        <input name="vehicleNumber" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>车辆识别代号</label>
                                    <div class="input-group">
                                        <input name="vin" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>整备质量</label>
                                    <div class="input-group">
                                        <input name="weight" type="number" maxlength="10"
                                               class="form-control data-item">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>动力类别</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="powerType" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="powerType" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>发动机号码</label>
                                    <div class="input-group">
                                        <input name="engineNumber" type="engineNumber" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>动力电池编码</label>
                                    <div class="input-group">
                                        <input name="batteryNumber" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>经办人</label>
                                    <div class="input-group">
                                        <input name="operator" type="text" maxlength="50"
                                               class="form-control data-item">
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>办理日期</label>
                                    <div class="input-group date-picker">
                                        <input name="processingDate" type="text" maxlength="10"
                                               pattern="^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$"
                                               class="form-control data-item">
                                        <div class="input-group-append input-group-addon">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-12">
                                    <label>说明</label>
                                    <div class="input-group">
                                        <textarea name="remark" rows="3" maxlength="255"
                                                  class="form-control data-item"></textarea>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-6">
                                    <label>注销日期</label>
                                    <div class="input-group date-picker">
                                        <input name="cancellationDate" type="text" maxlength="10"
                                               pattern="^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$"
                                               class="form-control data-item">
                                        <div class="input-group-append input-group-addon">
                                            <span class="input-group-text">
                                                <i class="far fa-calendar-alt"></i>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group col-sm-6">
                                    <label>车管所</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="vehicleManagementOffice" type="text" maxlength="50"
                                                   class="form-control data-item">
                                            <select name="vehicleManagementOffice" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-12">
                                    <label>已收回</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="recoveredMaterials" type="text" maxlength="255"
                                                   class="form-control data-item">
                                            <select name="recoveredMaterials" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="form-group col-sm-12">
                                    <label>未收回</label>
                                    <div class="input-group dual-input-group">
                                        <div class="input-group-prepend">
                                            <div class="input-group-text">
                                                <input type="checkbox">
                                            </div>
                                        </div>
                                        <div class="input-group-content">
                                            <input name="unrevokedMaterials" type="text" maxlength="255"
                                                   class="form-control data-item">
                                            <select name="unrevokedMaterials" class="form-control data-item">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="check-url-row" class="row">
                                <div class="form-group col-sm-12">
                                    <label>二维码详情页面</label>
                                    <div class="input-group link-input-group">
                                        <input type="text" readonly class="form-control">
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-secondary">
                                                <i class="fa fa-link"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="check-url-row" class="row">
                                <div class="form-group col-sm-12">
                                    <div class="form-check">
                                        <input id="active-input" class="form-check-input" type="checkbox">
                                        <label for="active-input" class="form-check-label">生效</label>
                                    </div>
                                </div>
                            </div>
                            <div id="check-url-row" class="row">
                                <div class="form-group col-sm-12">
                                    <div class="form-check">
                                        <input id="deleted-input" class="form-check-input" type="checkbox">
                                        <label for="deleted-input" class="form-check-label">作废</label>
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger delete-button">删除</button>
                    <div class="dropdown print-dropdown">
                        <button type="button" class="btn btn-info print-button dropdown-toggle" data-toggle="dropdown">
                            打印
                        </button>
                        <div class="dropdown-menu">
                            <a href="javascript:" class="dropdown-item">报废机动车回收证明</a>
                            <a href="javascript:" class="dropdown-item">机动车注销证明书</a>
                        </div>
                    </div>
                    <div class="col d-block"></div>
                    <button type="button" class="btn btn-secondary cancel-button" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save-button">保存</button>
                </div>
            </div>
        </div>
    </div>

    <div id="print-modal" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">报废机动车回收证明打印选项</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="form-group col-sm-12">
                                <label>第几联</label>
                                <div class="input-group">
                                    <select class="index-input form-control">
                                        <option value="0">打印所有</option>
                                        <option value="1">第一联</option>
                                        <option value="2">第二联</option>
                                        <option value="3">第三联</option>
                                        <option value="4">第四联</option>
                                        <option value="5">第五联</option>
                                        <option value="6">第六联</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="form-group col-sm-12">
                                <div class="form-check">
                                    <input id="shading-input" class="form-check-input" type="checkbox">
                                    <label for="shading-input" class="form-check-label">打印底纹</label>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="col d-block"></div>
                    <button type="button" class="btn btn-secondary cancel-button" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary ok-button">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div id="print-modal2" class="modal fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">机动车注销证明书打印选项</h5>
                    <button type="button" class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="form-group col-sm-12">
                                <label>落款</label>
                                <div class="input-group">
                                    <select class="index-input form-control">
                                        <option value="0">公安交通管理部门</option>
                                        <option value="1">回收企业</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="col d-block"></div>
                    <button type="button" class="btn btn-secondary cancel-button" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary ok-button">确定</button>
                </div>
            </div>
        </div>
    </div>

    <script id="table-template" type="text/html">
        {{each list item index}}
            <tr data-id="{{item.id}}">
                <td class="w3 index">{{index + 1}}</td>
                <td class="w4 center">
                    <i class="fa icon-{{item.checkCode ? 'true' : 'false'}}"></i>
                </td>
                <td class="w4 center">
                    <i class="fa icon-{{item.deleted ? 'true' : 'false'}}"></i>
                </td>
                <td class="overflow">{{item.serialNumber}}</td>
                <td class="overflow">{{item.certificateNumber}}</td>
                <td class="overflow">{{item.companyName}}</td>
                <td class="overflow">{{item.ownerName}}</td>
                <td class="overflow">{{item.idNumber}}</td>
                <td class="overflow">{{item.phoneNumber}}</td>
                <td class="overflow">{{item.deliveryDate}}</td>
                <td class="overflow">{{item.registrationDate}}</td>
                <td class="overflow">{{item.vehicleNumber}}</td>
                <td class="overflow">{{item.vehicleType}}</td>
                <td class="overflow">{{item.vehicleNature}}</td>
                <td class="overflow">{{item.vehicleBrand}}{{item.vehicleModel}}</td>
                <td class="overflow">{{item.vin}}</td>
                <td class="overflow">{{item.user ? item.user.fullName : ''}}</td>
                <td class="overflow">{{item.createdAt}}</td>
            </tr>
        {{/each}}
    </script>

    <script id="item-template" type="text/html">
        <option value="" data-content="<span class='text text-muted'>[未选择]</span>">[未选择]</option>
        {{each list item}}
            <option value="{{item}}">{{item}}</option>
        {{/each}}
    </script>
</div>
</html>
